<template>
  <div>
    <FilterTable
      ref="basetable"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :dataSource="tablelist"
      :onColumnsChange="columns => (this.columns = columns)"
      :onSyncTableData="changetablelist"
      :onCellChange="changeTab"
      :onRowSelectChange="changeSelect"
      columnsRef="zjwxclrepairStuff"
    >
      <template slot="controls" slot-scope="props">
        <el-button type="primary" :disabled="lab" @click="addFun()">新增</el-button>
        <el-button @click="delFun()">删除</el-button>
      </template>
    </FilterTable>
    <Drawer :visible.sync="havingVisible" title="维修发料" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <having @close="closeJpop" @changedata="havingFun"></having>
    </Drawer>
    <Drawer :visible.sync="emithavingVisible" title="维修发料" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <emithaving :getdata="emitdata" :propsList="propsList" @close="closeJpop" @changedata="havingFuns"></emithaving>
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import having from './having.vue';
import emithaving from './emithaving.vue';
import { getcplistList, getqueryFeeList } from '@/api/repair/business/customer/having';
export default {
  name: 'RepairStuff',
  components: {
    having,
    emithaving
  },
  mixins: [dictionary],
  props: ['getdata', 'dataList', 'list', 'wxlist', 'empty', 'lab', 'systemOptionAuthParams'],
  data() {
    this.basetables = null;
    return {
      havingVisible: false,
      fetchParams: {},
      columns: this.createTable(),
      emithavingVisible: false,
      emitdata: {},
      propsList: [],
      tablelist: [],
      editItems: []
    };
  },
  watch: {
    dataList(val) {
      this.insertRecords(val);
      this.propsList = val;
    },
    list(val) {
      this.initList(val);
    },
    wxlist(val) {
      this.Wxlist(val);
    },
    empty(val) {
      if (val) {
        this.changeempty();
      }
    }
  },
  mounted() {
    this.basetables = this.$refs.basetable.$refs.pageTable;
    this.getcplistListFun();
    this.insertRecords(this.dataList);
    // 服务活动 维修组合 回显
    this.initList(this.list);
    this.Wxlist(this.wxlist);
    this.changeempty();
  },
  methods: {
    createTable() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          minWidth: '100',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.emitFun(props)}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '是否入账',
          dataIndex: 'IS_FINISHED',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{this.createDictText(props.row.IS_FINISHED, '1278')}</span>;
          }
        },
        {
          title: '收费类别',
          dataIndex: 'MANAGE_SORT_CODE',
          sorter: true,
          filter: true,
          editable: true,
          editType: 'select',
          editItems: []
        },
        {
          title: '收费区分',
          dataIndex: 'CHARGE_PARTITION_CODE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editable: true,
          editItems: [],
          editType: 'select'
          // render: props => {
          //   return <span>{props.row.CHARGE_PARTITION_CODE}</span>;
          // }
        },
        {
          title: '备件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.PART_NO}</span>;
          }
        },
        {
          title: '备件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          editable: true,
          editType: 'text',
          render: props => {
            return <span>{props.row.PART_NAME}</span>;
          }
        },
        {
          title: '备件销售单价',
          dataIndex: 'PART_SALES_PRICE',
          sorter: true,
          filter: true,
          initialValue: '0',
          render: props => {
            return <span>{props.row.PART_SALES_PRICE}</span>;
          }
        },
        {
          title: '成本价',
          dataIndex: 'COST_PRICE',
          summationPrecision: 2,
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{props.row.COST_PRICE}</span>;
          // }
        },
        {
          title: '维修项目名称',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          editable: true,
          editType: 'select',
          editItems: []
          // render: props => {
          //   return <span>{props.row.LABOUR_CODE}</span>;
          // }
        },
        {
          title: '备件销售金额',
          dataIndex: 'PART_SALES_AMOUNT',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.PART_SALES_AMOUNT}</span>;
          }
        },
        {
          title: '实收金额',
          dataIndex: 'RECEIVE_AMOUNT',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{props.row.RECEIVE_AMOUNT}</span>;
          // }
        },
        {
          title: '主要备件',
          dataIndex: 'IS_MAIN_PART',
          sorter: true,
          filter: true,
          editable: true,
          editType: 'select',
          editItems: this.createDictList('1278')
        },
        {
          title: '备件数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{props.row.PART_QUANTITY}</span>;
          // }
        },
        {
          title: '计量单位',
          dataIndex: 'UNIT_NAME',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.UNIT_NAME}</span>;
          }
        },
        {
          title: '优惠金额',
          dataIndex: 'DISCOUNT_AMOUNT',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{props.row.DISCOUNT_AMOUNT}</span>;
          // }
        },
        {
          title: '折扣率',
          dataIndex: 'DISCOUNT',
          sorter: true,
          filter: true,
          // disabled: true,
          editable: true,
          editType: 'text'
          // render: props => {
          //   return <span>{props.row.DISCOUNT}</span>;
          // }
        },
        {
          title: '仓库代码',
          dataIndex: 'STORAGE_CODE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.STORAGE_CODE}</span>;
          }
        },
        {
          title: '不可打折',
          dataIndex: 'IS_DISCOUNT',
          sorter: true,
          filter: true,
          disabled: true,
          render: (props, h) => {
            let val = this.createDictText(props.row.IS_DISCOUNT, '1278') === '1' ? true : false;
            return <el-checkbox value={val} onInput={e => (val === e ? '1' : '0')}></el-checkbox>;
          }
        },
        {
          title: '是否增项',
          dataIndex: 'IS_ADDITION',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{this.createDictText(props.row.IS_ADDITION, '1278')}</span>;
          }
        },
        {
          title: '库位代码',
          dataIndex: 'STORAGE_POSITION_CODE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.STORAGE_POSITION_CODE}</span>;
          }
        },
        {
          title: '是否不修',
          dataIndex: 'NEEDLESS_REPAIR',
          sorter: true,
          filter: true,
          editable: true,
          render: (props, h) => {
            let val = props.row.NEEDLESS_REPAIR === '1' ? true : false;
            return <el-checkbox value={val} onInput={e => (props.row.NEEDLESS_REPAIR = e ? '1' : '0')}></el-checkbox>;
          }
        },
        {
          title: '不修原因',
          dataIndex: 'REASON',
          sorter: true,
          filter: true,
          editable: true,
          render: (props, h) => {
            let val = props.row.REASON === '1' ? true : false;
            return <el-checkbox value={val} onInput={e => (props.row.REASON = e ? '1' : '0')}></el-checkbox>;
          }
        },
        {
          title: '是否预捡',
          dataIndex: 'PRE_CHECK',
          sorter: true,
          filter: true,
          editable: true,
          render: (props, h) => {
            let val = props.row.PRE_CHECK === '1' ? true : false;
            return <el-checkbox value={val} onInput={e => (props.row.PRE_CHECK = e ? '1' : '0')}></el-checkbox>;
          }
        },
        {
          title: '是否内返',
          dataIndex: 'INTER_RETURN',
          sorter: true,
          filter: true,
          editable: true,
          render: (props, h) => {
            let val = props.row.INTER_RETURN === '1' ? true : false;
            return <el-checkbox value={val} onInput={e => (props.row.INTER_RETURN = e ? '1' : '0')}></el-checkbox>;
          }
        },
        {
          title: '流水号',
          dataIndex: 'BATCH_NO',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.BATCH_NO}</span>;
          }
        },
        {
          title: '预拣单打印流水号',
          dataIndex: 'PRINT_BATCH_NO',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.PRINT_BATCH_NO}</span>;
          }
        },
        {
          title: '活动编号',
          dataIndex: 'ACTIVITY_CODE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ACTIVITY_CODE}</span>;
          }
        },
        // {
        //   title: '合同编号',
        //   dataIndex: 'PACKAGE_CODE',
        //   sorter: true,
        //   filter: true,
        //   render: props => {
        //     return <span>{props.row.PACKAGE_CODE}</span>;
        //   }
        // },
        // {
        //   title: '备件单价差价',
        //   dataIndex: 'ASC_SHORTNAME',
        //   sorter: true,
        //   filter: true,
        //   render: props => {
        //     return <span>{props.row.ASC_SHORTNAME}</span>;
        //   }
        // },
        // {
        //   title: '备件差价总额',
        //   dataIndex: 'ASC_SHORTNAME',
        //   sorter: true,
        //   filter: true,
        //   render: props => {
        //     return <span>{props.row.ASC_SHORTNAME}</span>;
        //   }
        // },
        {
          title: '组合代码',
          dataIndex: 'PACKAGE_CODE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.PACKAGE_CODE}</span>;
          }
        },
        {
          title: '故障部位',
          dataIndex: 'POS_NAME',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.POS_NAME}</span>;
          }
        }
      ];
    },
    addFun() {
      this.havingVisible = true;
    },
    delFun() {
      this.basetables.EXECUTE_DELETE();
    },
    changeSelect(val) {
      console.log(val, '11111');
    },
    closeJpop(val) {
      this.havingVisible = false;
    },
    havingFun(val) {
      console.log(val, 'val');
      // SALES_PRICE  PART_SALES_PRICE
      val = {
        ...val,
        PART_SALES_PRICE: val['SALES_PRICE'],
        PART_SALES_AMOUNT: val['SALES_PRICE'],
        RECEIVE_AMOUNT: val['SALES_PRICE'],
        PART_QUANTITY: val['MIN_PACKAGE'],
        DISCOUNT_AMOUNT: 0
      };
      this.basetables.EXECUTE_INSERT(val);
      this.basetables.EXECUTE_RESET_HEIGHT();
      // 添加回显
    },
    havingFuns(val) {
      this.emithavingVisible = false;
      let index = val.index;
      this.tablelist[index] = val;
      this.columns[8].editItems = this.editItems;
      console.log(val, 'val');
      // 编辑回显
    },
    insertRecords(list) {
      console.log(list, 'erci');
      let arr = [];
      if (list && list.length > 0) {
        arr = list.map(x => ({ text: x.LABOUR_NAME, value: x.LABOUR_CODE, index: x.index }));
        console.log(arr, 'arr');
      }
      this.editItems = arr;
      this.columns[8].editItems = this.editItems;
      // this.basetables.EXECUTE_INSERT(list);
    },
    // 维修项目名称选择
    changeTab(a, b) {
      console.log('a,b', a, b);
    },
    initList(val) {
      console.log(val, 'yici');
      this.basetables.EXECUTE_INSERT(val);
    },
    // 维修组合服务活动确定后返回数据 -维修材料 下 维修项目名称下拉框改变
    Wxlist(list) {
      console.log(list, 'wxlist');
      let arr = [];
      if (list && list.length > 0) {
        arr = list.map(x => ({ text: x.LABOUR_NAME, value: x.LABOUR_CODE, index: x.index }));
        console.log(arr, 'arr');
      }
      this.editItems = arr;
      this.columns[8].editItems = this.editItems;
    },
    // 编辑
    emitFun(data) {
      let json = data.row;
      console.log(data, this.emitdata);
      this.emitdata = json;
      this.emithavingVisible = true;
    },
    async getcplistListFun() {
      const res = await getcplistList();
      const response = await getqueryFeeList();
      this.columns[2].editItems = this.columns[2].filterItems = response.map(x => ({ text: x.MANAGE_SORT_NAME, value: x.MANAGE_SORT_CODE }));
      this.columns[3].editItems = this.columns[3].filterItems = res.map(x => ({ text: x.CHARGE_PARTITION_NAME, value: x.CHARGE_PARTITION_CODE }));
    },
    changetablelist(val) {
      console.log(val, 'biaoge bianhuale');
      // for (const item of val) {
      //   item.LABOUR_INDEX = item.LABOUR_CODE;
      // }
      this.$emit('syncTablelist', val);
    },
    // 清空列表
    changeempty() {
      if (this.empty) {
        this.tablelist = [];
        this.$emit('changeEmpty', false);
      }
      return;
    }
  }
};
</script>

<style lang="less"></style>
